<template>
  <view class="container">
    <!-- 调试信息区域 -->
    <view v-if="showDebugInfo" class="debug-section">
      <text class="debug-title">调试信息</text>
      <text class="debug-text">图片路径: {{ originalImage }}</text>
      <text class="debug-text">画布尺寸: {{ canvasWidth }}x{{ canvasHeight }}</text>
      <text class="debug-text">水印文字: {{ watermarkText }}</text>
      <text class="debug-text">平台信息: {{ platformInfo }}</text>
    </view>
    
    <!-- 图片预览区域 -->
    <view class="preview-section">
      <canvas 
        v-if="canvasWidth && canvasHeight"
        id="watermarkCanvas" 
        class="preview-canvas"
        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
        canvas-id="watermarkCanvas"
      ></canvas>
      <view v-else class="loading-placeholder">
        <text>加载中...</text>
      </view>
    </view>

    <!-- 水印设置面板 -->
    <view class="settings-panel">
      <!-- 水印文字设置 -->
      <view class="card">
        <text class="section-title">水印文字</text>
        <view class="input-group">
          <input 
            v-model="watermarkText" 
            class="input-field" 
            placeholder="请输入水印文字"
            @input="updateWatermark"
          />
        </view>
        <view class="button-group">
          <button class="btn-secondary" @click="generateDefaultWatermark">
            生成默认水印
          </button>
          <button class="btn-secondary" @click="clearWatermark">
            清空水印
          </button>
        </view>
      </view>

      <!-- 水印位置设置 -->
      <view class="card">
        <text class="section-title">水印位置</text>
        <view class="position-grid">
          <view 
            v-for="(pos, index) in positionOptions" 
            :key="index"
            :class="['position-item', { active: watermarkPosition === pos.value }]"
            @click="setPosition(pos.value)"
          >
            <text class="position-icon">{{ pos.icon }}</text>
            <text class="position-text">{{ pos.label }}</text>
          </view>
        </view>
      </view>

      <!-- 水印样式设置 -->
      <view class="card">
        <text class="section-title">水印样式</text>
        
        <!-- 字体大小 -->
        <view class="slider-container">
          <text class="slider-label">字体大小: {{ fontSize }}px</text>
          <slider 
            :value="fontSize" 
            :min="12" 
            :max="72" 
            :step="2"
            @change="setFontSize"
            activeColor="#007AFF"
          />
        </view>

        <!-- 透明度 -->
        <view class="slider-container">
          <text class="slider-label">透明度: {{ opacity }}%</text>
          <slider 
            :value="opacity" 
            :min="10" 
            :max="100" 
            :step="5"
            @change="setOpacity"
            activeColor="#007AFF"
          />
        </view>

        <!-- 旋转角度 -->
        <view class="slider-container">
          <text class="slider-label">旋转角度: {{ rotation }}°</text>
          <slider 
            :value="rotation" 
            :min="-45" 
            :max="45" 
            :step="5"
            @change="setRotation"
            activeColor="#007AFF"
          />
        </view>

        <!-- 颜色选择 -->
        <view class="color-section">
          <text class="slider-label">水印颜色</text>
          <view class="color-grid">
            <view 
              v-for="(color, index) in colorOptions" 
              :key="index"
              :class="['color-item', { active: watermarkColor === color.value }]"
              :style="{ backgroundColor: color.value }"
              @click="setColor(color.value)"
            ></view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="btn-secondary" @click="resetSettings">重置设置</button>
        <button class="btn-primary" @click="saveImage">保存图片</button>
        <!-- 调试按钮 -->
        <button v-if="showDebugInfo" class="btn-secondary" @click="testExif">测试 EXIF</button>
        <button v-if="showDebugInfo" class="btn-secondary" @click="testSaveFunction">测试保存功能</button>
      </view>
    </view>
  </view>
</template>

<script>
import WatermarkUtils from '@/utils/watermark.js'
import PlatformUtils from '@/utils/platform.js'

export default {
  data() {
    return {
      originalImage: '',
      watermarkText: '',
      watermarkPosition: 'bottom-left',
      fontSize: 20,
      opacity: 70,
      rotation: 0,
      watermarkColor: '#ffffff',
      canvasWidth: 0,
      canvasHeight: 0,
      exifInfo: null,
      positionOptions: WatermarkUtils.getPositionOptions(),
      colorOptions: WatermarkUtils.getColorOptions(),
      realtimePreview: true, // 实时预览开关
      previewDebounceTimer: null, // 防抖定时器
      showDebugInfo: true, // 控制调试信息显示
      platformInfo: '' // 存储平台信息
    }
  },

  onLoad(options) {
    console.log('编辑器页面加载，参数:', options)
    
    // 初始化平台信息
    this.platformInfo = JSON.stringify(PlatformUtils.getPlatformInfo(), null, 2)
    console.log('平台信息:', this.platformInfo)
    
    // 在开发环境下显示调试信息
    // #ifdef H5
    this.showDebugInfo = true
    // #endif
    
    if (options.image) {
      this.originalImage = decodeURIComponent(options.image)
      console.log('解码后的图片路径:', this.originalImage)
      
      // 验证图片路径
      if (!this.originalImage || this.originalImage.trim() === '') {
        console.error('图片路径为空或无效')
        uni.showToast({
          title: '图片路径无效',
          icon: 'error'
        })
        return
      }
      
      // 延迟加载图片，确保页面完全加载
      this.$nextTick(() => {
        this.loadImage()
      })
    } else {
      console.error('未接收到图片参数')
      uni.showToast({
        title: '未接收到图片参数',
        icon: 'error'
      })
    }
  },

  methods: {
    // 防抖绘制水印
    debounceDrawWatermark() {
      if (!this.realtimePreview) return
      
      // 清除之前的定时器
      if (this.previewDebounceTimer) {
        clearTimeout(this.previewDebounceTimer)
      }
      
      // 设置新的定时器，延迟100ms执行
      this.previewDebounceTimer = setTimeout(() => {
        this.drawWatermark()
      }, 100)
    },

    // 加载图片
    async loadImage() {
      console.log('开始加载图片:', this.originalImage)
      
      // 验证原始图片路径
      if (!this.originalImage) {
        uni.showToast({
          title: '图片路径为空',
          icon: 'error'
        })
        return
      }
      
      uni.showLoading({
        title: '加载图片中...'
      })
      
      try {
        // 获取图片信息
        const imageInfo = await this.getImageInfo(this.originalImage)
        
        console.log('图片信息获取成功:', imageInfo)
        
        // 验证图片尺寸
        if (!imageInfo.width || !imageInfo.height) {
          throw new Error('图片尺寸信息无效')
        }
        
        // 计算画布尺寸，保持宽高比
        const maxWidth = uni.getSystemInfoSync().windowWidth - 40
        const maxHeight = 400
        const ratio = Math.min(maxWidth / imageInfo.width, maxHeight / imageInfo.height)
        
        this.canvasWidth = Math.floor(imageInfo.width * ratio)
        this.canvasHeight = Math.floor(imageInfo.height * ratio)
        
        console.log('画布尺寸计算完成:', {
          original: { width: imageInfo.width, height: imageInfo.height },
          canvas: { width: this.canvasWidth, height: this.canvasHeight }
        })
        uni.hideLoading()
        // 获取EXIF信息并生成默认水印
        await this.loadExifAndGenerateDefault()
        
      } catch (error) {
        console.error('加载图片失败:', error)
        
        // 提供更详细的错误信息
        let errorMessage = '加载图片失败'
        if (error.message) {
          errorMessage = error.message
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'error',
          duration: 3000
        })
        
        // 尝试使用默认设置
        this.setDefaultCanvasSize()
        
      } finally {
        uni.hideLoading()
      }
    },
    
    // 设置默认画布尺寸
    setDefaultCanvasSize() {
      const systemInfo = uni.getSystemInfoSync()
      this.canvasWidth = systemInfo.windowWidth - 40
      this.canvasHeight = 300
      
      console.log('使用默认画布尺寸:', {
        width: this.canvasWidth,
        height: this.canvasHeight
      })
    },
    
    // 测试EXIF获取
    async testExif() {
      console.log('开始测试EXIF获取...')
      console.log('当前图片路径:', this.originalImage)
      
      try {
        // 测试路径验证
        const validation = PlatformUtils.validateImagePath(this.originalImage)
        console.log('路径验证结果:', validation)
        
        // 测试图片可访问性
        const testResult = await PlatformUtils.testImagePath(this.originalImage)
        console.log('图片可访问性测试结果:', testResult)
        
        // 测试EXIF获取
        const exifInfo = await WatermarkUtils.getImageExifSimple(this.originalImage)
        console.log('EXIF获取结果:', exifInfo)
        
        // 测试默认水印生成
        const watermarkText = await WatermarkUtils.generateDefaultWatermark(exifInfo)
        console.log('默认水印文字:', watermarkText)
        
        uni.showToast({
          title: 'EXIF测试完成，请查看控制台',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('EXIF测试失败:', error)
        uni.showToast({
          title: 'EXIF测试失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 测试保存功能
    async testSave() {
      console.log('开始测试保存功能...')
      
      try {
        // 生成一个测试图片路径
        const testPath = 'file:///storage/emulated/0/DCIM/test.jpg'
        console.log('测试文件路径:', testPath)
        
        // 测试路径验证
        const validation = PlatformUtils.validateSaveFilePath(testPath)
        console.log('保存路径验证结果:', validation)
        
        // 测试平台信息
        const platformInfo = PlatformUtils.getPlatformInfo()
        console.log('平台信息:', platformInfo)
        
        // 测试保存方法支持
        const supportsPhotoAlbum = PlatformUtils.supportsPhotoAlbum()
        const supportsDownload = PlatformUtils.supportsDownload()
        console.log('支持相册保存:', supportsPhotoAlbum)
        console.log('支持下载:', supportsDownload)
        
        uni.showToast({
          title: '保存测试完成，请查看控制台',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('保存测试失败:', error)
        uni.showToast({
          title: '保存测试失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 测试Canvas功能
    async testCanvas() {
      console.log('开始测试Canvas功能...')
      
      try {
        // 检查Canvas状态
        console.log('Canvas尺寸:', { width: this.canvasWidth, height: this.canvasHeight })
        console.log('原图路径:', this.originalImage)
        console.log('水印文字:', this.watermarkText)
        
        // 测试Canvas上下文创建
        const ctx = uni.createCanvasContext('watermarkCanvas')
        console.log('Canvas上下文创建成功:', ctx)
        
        // 测试绘制
        if (ctx) {
          ctx.setFillStyle('#ff0000')
          ctx.fillRect(0, 0, 100, 100)
          ctx.draw(true, () => {
            console.log('Canvas测试绘制完成')
            
            // 测试生成临时图片
            uni.canvasToTempFilePath({
              canvasId: 'watermarkCanvas',
              fileType: 'png',
              quality: 1,
              success: (res) => {
                console.log('Canvas测试图片生成成功:', res)
                uni.showToast({
                  title: 'Canvas测试成功',
                  icon: 'success'
                })
              },
              fail: (err) => {
                console.error('Canvas测试图片生成失败:', err)
                uni.showToast({
                  title: 'Canvas测试失败: ' + (err.errMsg || '未知错误'),
                  icon: 'error'
                })
              }
            })
          })
        } else {
          throw new Error('Canvas上下文创建失败')
        }
        
      } catch (error) {
        console.error('Canvas测试失败:', error)
        uni.showToast({
          title: 'Canvas测试失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 测试实际绘制流程
    async testActualDraw() {
      console.log('开始测试实际绘制流程...')
      
      try {
        // 检查必要的数据
        if (!this.canvasWidth || !this.canvasHeight) {
          throw new Error('Canvas尺寸未设置')
        }
        
        if (!this.originalImage) {
          throw new Error('原图未加载')
        }
        
        console.log('开始实际绘制...')
        
        // 模拟实际的绘制过程
        const ctx = uni.createCanvasContext('watermarkCanvas', this)
        
        // 清空画布
        ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        console.log('画布已清空')
        
        // 绘制原图
        console.log('开始绘制原图:', this.originalImage)
        ctx.drawImage(this.originalImage, 0, 0, this.canvasWidth, this.canvasHeight)
        console.log('原图绘制完成')
        
        // 绘制水印
        if (this.watermarkText && this.watermarkText.trim()) {
          console.log('开始绘制水印:', this.watermarkText)
          
          // 先尝试简单水印绘制
          try {
            WatermarkUtils.drawSimpleWatermark(ctx, this.watermarkText, {
              fontSize: this.fontSize,
              color: this.watermarkColor,
              opacity: this.opacity / 100,
              padding: 15
            })
            console.log('简单水印绘制完成')
          } catch (simpleError) {
            console.warn('简单水印绘制失败，尝试完整水印:', simpleError)
            
            // 如果简单水印失败，尝试完整水印
            WatermarkUtils.drawWatermark(ctx, this.watermarkText, {
              position: this.watermarkPosition,
              fontSize: this.fontSize,
              color: this.watermarkColor,
              opacity: this.opacity / 100,
              rotation: this.rotation,
              padding: 15,
              canvasWidth: this.canvasWidth,
              canvasHeight: this.canvasHeight
            })
            console.log('完整水印绘制完成')
          }
        }
        
        // 绘制到Canvas并等待完成
        ctx.draw(true, () => {
          console.log('实际绘制完成，开始生成临时图片...')
          
          // 生成临时图片
          uni.canvasToTempFilePath({
            canvasId: 'watermarkCanvas',
            fileType: 'png',
            quality: 1,
            width: this.canvasWidth,
            height: this.canvasHeight,
            destWidth: this.canvasWidth,
            destHeight: this.canvasHeight,
            success: (res) => {
              console.log('实际绘制临时图片生成成功:', res)
              if (res.tempFilePath) {
                console.log('临时文件路径:', res.tempFilePath)
                uni.showToast({
                  title: '实际绘制测试成功',
                  icon: 'success'
                })
              } else {
                console.error('临时文件路径为空')
                uni.showToast({
                  title: '临时文件路径为空',
                  icon: 'error'
                })
              }
            },
            fail: (err) => {
              console.error('实际绘制临时图片生成失败:', err)
              uni.showToast({
                title: '实际绘制测试失败: ' + (err.errMsg || '未知错误'),
                icon: 'error'
              })
            }
          })
        })
        
      } catch (error) {
        console.error('实际绘制测试失败:', error)
        uni.showToast({
          title: '实际绘制测试失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 测试图片绘制
    async testImageDraw() {
      console.log('开始测试图片绘制...')
      
      try {
        // 检查必要的数据
        if (!this.canvasWidth || !this.canvasHeight) {
          throw new Error('Canvas尺寸未设置')
        }
        
        if (!this.originalImage) {
          throw new Error('原图未加载')
        }
        
        console.log('开始图片绘制测试...')
        
        // 创建Canvas上下文
        const ctx = uni.createCanvasContext('watermarkCanvas', this)
        
        // 清空画布
        ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        console.log('画布已清空')
        
        // 只绘制图片，不绘制水印
        console.log('开始绘制原图:', this.originalImage)
        ctx.drawImage(this.originalImage, 0, 0, this.canvasWidth, this.canvasHeight)
        console.log('原图绘制完成')
        
        // 绘制到Canvas并等待完成
        ctx.draw(true, () => {
          console.log('图片绘制完成，开始生成临时图片...')
          
          // 生成临时图片
          uni.canvasToTempFilePath({
            canvasId: 'watermarkCanvas',
            fileType: 'png',
            quality: 1,
            width: this.canvasWidth,
            height: this.canvasHeight,
            destWidth: this.canvasWidth,
            destHeight: this.canvasHeight,
            success: (res) => {
              console.log('图片绘制临时图片生成成功:', res)
              if (res.tempFilePath) {
                console.log('临时文件路径:', res.tempFilePath)
                uni.showToast({
                  title: '图片绘制测试成功',
                  icon: 'success'
                })
              } else {
                console.error('临时文件路径为空')
                uni.showToast({
                  title: '图片绘制测试失败：路径为空',
                  icon: 'error'
                })
              }
            },
            fail: (err) => {
              console.error('图片绘制临时图片生成失败:', err)
              uni.showToast({
                title: '图片绘制测试失败: ' + (err.errMsg || '未知错误'),
                icon: 'error'
              })
            }
          })
        })
        
      } catch (error) {
        console.error('图片绘制测试失败:', error)
        uni.showToast({
          title: '图片绘制测试失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 测试Canvas显示
    async testCanvasDisplay() {
      console.log('开始测试Canvas显示...')
      
      try {
        // 检查Canvas状态
        console.log('Canvas状态检查:')
        console.log('- Canvas尺寸:', { width: this.canvasWidth, height: this.canvasHeight })
        console.log('- 原图路径:', this.originalImage)
        console.log('- 水印文字:', this.watermarkText)
        
        // 检查Canvas元素是否存在
        const canvasElement = document.getElementById('watermarkCanvas')
        console.log('- Canvas元素:', canvasElement)
        
        // 测试基本绘制
        console.log('开始基本绘制测试...')
        
        const ctx = uni.createCanvasContext('watermarkCanvas', this)
        if (!ctx) {
          throw new Error('Canvas上下文创建失败')
        }
        
        // 绘制一个简单的红色矩形
        ctx.setFillStyle('#ff0000')
        ctx.fillRect(0, 0, 100, 100)
        ctx.draw(true, () => {
          console.log('基本绘制完成，Canvas应该显示红色矩形')
          uni.showToast({
            title: 'Canvas显示测试完成',
            icon: 'success'
          })
        })
        
      } catch (error) {
        console.error('Canvas显示测试失败:', error)
        uni.showToast({
          title: 'Canvas显示测试失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 强制刷新Canvas
    async forceRefreshCanvas() {
      console.log('开始强制刷新Canvas...')
      
      try {
        // 重新设置Canvas尺寸
        const systemInfo = uni.getSystemInfoSync()
        this.canvasWidth = systemInfo.windowWidth - 40
        this.canvasHeight = 300
        
        console.log('重新设置Canvas尺寸:', { width: this.canvasWidth, height: this.canvasHeight })
        
        // 等待Canvas重新渲染
        await this.$nextTick()
        
        // 延迟一点时间确保Canvas完全初始化
        setTimeout(() => {
          console.log('开始重新绘制Canvas...')
          
          const ctx = uni.createCanvasContext('watermarkCanvas', this)
          if (!ctx) {
            throw new Error('Canvas上下文创建失败')
          }
          
          // 清空画布
          ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
          
          // 绘制背景色
          ctx.setFillStyle('#f0f0f0')
          ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
          
          // 绘制测试文字
          ctx.setFillStyle('#333333')
          ctx.setFontSize(16)
          ctx.fillText('Canvas测试', 20, 50)
          
          // 绘制到Canvas
          ctx.draw(true, () => {
            console.log('Canvas强制刷新完成')
            uni.showToast({
              title: 'Canvas强制刷新完成',
              icon: 'success'
            })
          })
          
        }, 200)
        
      } catch (error) {
        console.error('Canvas强制刷新失败:', error)
        uni.showToast({
          title: 'Canvas强制刷新失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 测试保存功能
    async testSaveFunction() {
      console.log('开始测试保存功能...')
      
      try {
        // 生成一个测试图片
        const ctx = uni.createCanvasContext('watermarkCanvas', this)
        if (!ctx) {
          throw new Error('Canvas上下文创建失败')
        }
        
        // 绘制测试内容
        ctx.setFillStyle('#ff0000')
        ctx.fillRect(0, 0, 200, 200)
        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(20)
        ctx.fillText('测试图片', 50, 100)
        
        // 绘制到Canvas
        ctx.draw(true, () => {
          console.log('测试图片绘制完成，开始生成临时文件...')
          
          // 生成临时图片
          uni.canvasToTempFilePath({
            canvasId: 'watermarkCanvas',
            fileType: 'png',
            quality: 1,
            success: (res) => {
              console.log('测试图片生成成功:', res)
              if (res.tempFilePath) {
                console.log('测试图片路径:', res.tempFilePath)
                
                // 测试保存功能
                this.saveImageToAlbum(res.tempFilePath)
                
              } else {
                console.error('测试图片路径为空')
                uni.showToast({
                  title: '测试图片生成失败',
                  icon: 'error'
                })
              }
            },
            fail: (err) => {
              console.error('测试图片生成失败:', err)
              uni.showToast({
                title: '测试图片生成失败: ' + (err.errMsg || '未知错误'),
                icon: 'error'
              })
            }
          })
        })
        
      } catch (error) {
        console.error('测试保存功能失败:', error)
        uni.showToast({
          title: '测试保存功能失败: ' + error.message,
          icon: 'error'
        })
      }
    },

    // 获取图片信息
    async getImageInfo(src) {
      console.log('开始验证图片路径:', src)
      
      // 使用平台工具类验证路径
      const validation = PlatformUtils.validateImagePath(src)
      if (!validation.isValid) {
        throw new Error(validation.error)
      }
      
      console.log('路径验证通过，生成的路径变体:', validation.pathVariations)
      
      // 测试图片是否可访问
      const testResult = await PlatformUtils.testImagePath(validation.normalizedPath || src)
      if (!testResult.accessible) {
        console.error('所有路径都无法访问，详细错误:', testResult.error)
        throw new Error(testResult.error)
      }
      
      console.log('图片可访问，成功路径:', testResult.successfulPath)
      console.log('图片信息:', testResult.imageInfo)
      return testResult.imageInfo
    },
    


    // 加载EXIF信息并生成默认水印
    async loadExifAndGenerateDefault() {
      try {
        console.log('开始获取EXIF信息...')
        
        // 获取EXIF信息（使用简化版本）
        this.exifInfo = await WatermarkUtils.getImageExifSimple(this.originalImage)
        
        console.log('EXIF信息获取成功:', this.exifInfo)
        
        // 生成默认水印文字（异步）
        this.watermarkText = await WatermarkUtils.generateDefaultWatermark(this.exifInfo)
        
        console.log('默认水印文字生成成功:', this.watermarkText)
        
        // 应用默认设置
        const defaultSettings = WatermarkUtils.getDefaultWatermarkSettings()
        this.watermarkPosition = defaultSettings.position
        this.fontSize = defaultSettings.fontSize
        this.watermarkColor = defaultSettings.color
        this.opacity = defaultSettings.opacity * 100
        this.rotation = defaultSettings.rotation
        
        console.log('默认设置应用完成:', {
          position: this.watermarkPosition,
          fontSize: this.fontSize,
          color: this.watermarkColor,
          opacity: this.opacity,
          rotation: this.rotation
        })
        
        // 绘制水印
        this.$nextTick(() => {
          // 延迟一点时间确保Canvas完全初始化
          setTimeout(() => {
            this.drawWatermark()
          }, 100)
        })
        
        uni.showToast({
          title: '已生成默认水印',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('生成默认水印失败:', error)
        
        // 如果获取EXIF失败，使用当前时间生成默认水印
        try {
          this.watermarkText = await WatermarkUtils.generateDefaultWatermark()
          console.log('使用默认水印文字:', this.watermarkText)
          
          // 应用默认设置
          const defaultSettings = WatermarkUtils.getDefaultWatermarkSettings()
          this.watermarkPosition = defaultSettings.position
          this.fontSize = defaultSettings.fontSize
          this.watermarkColor = defaultSettings.color
          this.opacity = defaultSettings.opacity * 100
          this.rotation = defaultSettings.rotation
          
          this.drawWatermark()
          
          uni.showToast({
            title: '已生成基础水印',
            icon: 'success'
          })
        } catch (fallbackError) {
          console.error('生成基础水印也失败:', fallbackError)
          
          // 最后的备用方案
          this.watermarkText = '水印文字'
          this.drawWatermark()
          
          uni.showToast({
            title: '水印生成失败，请手动输入',
            icon: 'none'
          })
        }
      }
    },

    // 生成默认水印
    async generateDefaultWatermark() {
      try {
        uni.showLoading({
          title: '生成默认水印...'
        })
        
        // 重新获取EXIF信息
        this.exifInfo = await WatermarkUtils.getImageExif(this.originalImage)
        
        // 生成默认水印文字（异步）
        this.watermarkText = await WatermarkUtils.generateDefaultWatermark(this.exifInfo)
        
        // 应用默认设置
        const defaultSettings = WatermarkUtils.getDefaultWatermarkSettings()
        this.watermarkPosition = defaultSettings.position
        this.fontSize = defaultSettings.fontSize
        this.watermarkColor = defaultSettings.color
        this.opacity = defaultSettings.opacity * 100
        this.rotation = defaultSettings.rotation
        
        this.drawWatermark()
		
        uni.hideLoading()
		
        uni.showToast({
          title: '已生成默认水印',
          icon: 'success'
        })
        
      } catch (error) {
        console.error('生成默认水印失败:', error)
        uni.showToast({
          title: '生成默认水印失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },

    // 清空水印
    clearWatermark() {
      this.watermarkText = ''
      this.drawWatermark()
      uni.showToast({
        title: '已清空水印',
        icon: 'success'
      })
    },

    // 绘制水印
    drawWatermark() {
      if (!this.canvasWidth || !this.canvasHeight) {
        console.warn('Canvas尺寸未初始化')
        return
      }
      
      if (!this.originalImage) {
        console.warn('原图未加载')
        return
      }
      
      console.log('开始绘制Canvas，尺寸:', { width: this.canvasWidth, height: this.canvasHeight })
      console.log('原图路径:', this.originalImage)
      
      try {
        const ctx = uni.createCanvasContext('watermarkCanvas', this)
        
        if (!ctx) {
          console.error('Canvas上下文创建失败')
          return
        }
        
        console.log('Canvas上下文创建成功')
        
        // 清空画布
        ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        console.log('画布已清空')
        
        // 绘制原图
        console.log('开始绘制原图:', this.originalImage)
        ctx.drawImage(this.originalImage, 0, 0, this.canvasWidth, this.canvasHeight)
        console.log('原图绘制完成')
        
        // 如果有水印文字，则绘制水印
        if (this.watermarkText && this.watermarkText.trim()) {
          console.log('开始绘制水印:', this.watermarkText)
          
          // 先尝试简单水印绘制
          try {
            WatermarkUtils.drawSimpleWatermark(ctx, this.watermarkText, {
              fontSize: this.fontSize,
              color: this.watermarkColor,
              opacity: this.opacity / 100,
              padding: 15
            })
            console.log('简单水印绘制完成')
          } catch (simpleError) {
            console.warn('简单水印绘制失败，尝试完整水印:', simpleError)
            
            // 如果简单水印失败，尝试完整水印
            WatermarkUtils.drawWatermark(ctx, this.watermarkText, {
              position: this.watermarkPosition,
              fontSize: this.fontSize,
              color: this.watermarkColor,
              opacity: this.opacity / 100,
              rotation: this.rotation,
              padding: 15,
              canvasWidth: this.canvasWidth,
              canvasHeight: this.canvasHeight
            })
            console.log('完整水印绘制完成')
          }
        }
        
        // 立即绘制到Canvas
        ctx.draw(false)
        
        console.log('Canvas绘制完成')
      } catch (error) {
        console.error('绘制水印失败:', error)
      }
    },
    
    // 绘制水印并等待完成
    async drawWatermarkAndWait() {
      return new Promise((resolve, reject) => {
        if (!this.canvasWidth || !this.canvasHeight) {
          reject(new Error('Canvas尺寸未初始化'))
          return
        }
        
        if (!this.originalImage) {
          reject(new Error('原图未加载'))
          return
        }
        
        try {
          const ctx = uni.createCanvasContext('watermarkCanvas', this)
          
          // 清空画布
          ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
          
          // 绘制原图
          ctx.drawImage(this.originalImage, 0, 0, this.canvasWidth, this.canvasHeight)
          
          // 如果有水印文字，则绘制水印
          if (this.watermarkText && this.watermarkText.trim()) {
            console.log('开始绘制水印:', this.watermarkText)
            
            // 先尝试简单水印绘制
            try {
              WatermarkUtils.drawSimpleWatermark(ctx, this.watermarkText, {
                fontSize: this.fontSize,
                color: this.watermarkColor,
                opacity: this.opacity / 100,
                padding: 15
              })
              console.log('简单水印绘制完成')
            } catch (simpleError) {
              console.warn('简单水印绘制失败，尝试完整水印:', simpleError)
              
              // 如果简单水印失败，尝试完整水印
              WatermarkUtils.drawWatermark(ctx, this.watermarkText, {
                position: this.watermarkPosition,
                fontSize: this.fontSize,
                color: this.watermarkColor,
                opacity: this.opacity / 100,
                rotation: this.rotation,
                padding: 15,
                canvasWidth: this.canvasWidth,
                canvasHeight: this.canvasHeight
              })
              console.log('完整水印绘制完成')
            }
          }
          
          // 绘制到Canvas并等待完成
          ctx.draw(true, () => {
            console.log('Canvas绘制完成，可以保存')
            resolve()
          })
          
        } catch (error) {
          console.error('绘制水印失败:', error)
          reject(error)
        }
      })
    },

    // 更新水印
    updateWatermark() {
      if (this.realtimePreview) {
        this.debounceDrawWatermark()
      }
    },

    // 设置位置
    setPosition(position) {
      this.watermarkPosition = position
      if (this.realtimePreview) {
        this.debounceDrawWatermark()
      }
    },

    // 设置字体大小
    setFontSize(e) {
      this.fontSize = e.detail.value
      if (this.realtimePreview) {
        this.debounceDrawWatermark()
      }
    },

    // 设置透明度
    setOpacity(e) {
      this.opacity = e.detail.value
      if (this.realtimePreview) {
        this.debounceDrawWatermark()
      }
    },

    // 设置旋转角度
    setRotation(e) {
      this.rotation = e.detail.value
      if (this.realtimePreview) {
        this.debounceDrawWatermark()
      }
    },

    // 设置颜色
    setColor(color) {
      this.watermarkColor = color
      if (this.realtimePreview) {
        this.debounceDrawWatermark()
      }
    },

    // 切换实时预览
    toggleRealtimePreview() {
      this.realtimePreview = !this.realtimePreview
      if (this.realtimePreview) {
        // 如果开启实时预览，立即更新一次
        this.drawWatermark()
      }
      uni.showToast({
        title: this.realtimePreview ? '已开启实时预览' : '已关闭实时预览',
        icon: 'none'
      })
    },

    // 重置设置
    async resetSettings() {
      const defaultSettings = WatermarkUtils.getDefaultWatermarkSettings()
      this.watermarkText = defaultSettings.text
      this.watermarkPosition = defaultSettings.position
      this.fontSize = defaultSettings.fontSize
      this.opacity = defaultSettings.opacity * 100
      this.rotation = defaultSettings.rotation
      this.watermarkColor = defaultSettings.color
      this.drawWatermark()
      
      uni.showToast({
        title: '已重置设置',
        icon: 'success'
      })
    },

    // 保存图片
    saveImage() {
      if (!this.watermarkText || this.watermarkText.trim() === '') {
        uni.showToast({
          title: '请先添加水印文字',
          icon: 'none'
        })
        return
      }
      
      // 显示平台特定的保存提示
      const saveSuggestion = PlatformUtils.getSaveSuggestion()
      if (!saveSuggestion.supported) {
        uni.showModal({
          title: '保存提示',
          content: saveSuggestion.message,
          confirmText: '继续',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              this.startSaveProcess()
            }
          }
        })
      } else {
        this.startSaveProcess()
      }
    },

    // 开始保存流程
    async startSaveProcess() {
      uni.showLoading({
        title: '保存中...'
      })
      
      console.log('开始保存流程...')
      
      try {
        // 确保Canvas完全绘制完成
        await this.drawWatermarkAndWait()
        
        // 等待一小段时间确保绘制完全完成
        await new Promise(resolve => setTimeout(resolve, 100))
        
        console.log('Canvas绘制完成，开始生成临时图片...')
        this.generateTempImage()
        
      } catch (error) {
        console.error('保存流程失败:', error)
        uni.hideLoading()
        uni.showToast({
          title: '保存失败: ' + error.message,
          icon: 'error'
        })
      }
    },
    
    // 生成临时图片
    generateTempImage() {
      console.log('开始调用canvasToTempFilePath...')
      
      // 检查Canvas是否存在
      const canvasContext = uni.createCanvasContext('watermarkCanvas')
      if (!canvasContext) {
        console.error('Canvas上下文创建失败')
        uni.hideLoading()
        uni.showToast({
          title: 'Canvas创建失败',
          icon: 'error'
        })
        return
      }
      
      // 检查Canvas尺寸
      if (!this.canvasWidth || !this.canvasHeight) {
        console.error('Canvas尺寸未设置:', { width: this.canvasWidth, height: this.canvasHeight })
        uni.hideLoading()
        uni.showToast({
          title: 'Canvas尺寸未设置',
          icon: 'error'
        })
        return
      }
      
      console.log('Canvas尺寸:', { width: this.canvasWidth, height: this.canvasHeight })
      
      uni.canvasToTempFilePath({
        canvasId: 'watermarkCanvas',
        fileType: 'png',
        quality: 1,
        width: this.canvasWidth,
        height: this.canvasHeight,
        destWidth: this.canvasWidth,
        destHeight: this.canvasHeight,
        success: (res) => {
          console.log('临时图片生成成功:', res)
          
          // 验证文件路径
          if (!res.tempFilePath || res.tempFilePath.trim() === '') {
            console.error('临时文件路径为空')
            uni.hideLoading()
            uni.showToast({
              title: '生成图片失败：路径为空',
              icon: 'error'
            })
            return
          }
          
          console.log('临时文件路径:', res.tempFilePath)
          this.saveImageToAlbum(res.tempFilePath)
        },
        fail: (err) => {
          console.error('生成临时图片失败:', err)
          uni.hideLoading()
          uni.showToast({
            title: '生成图片失败: ' + (err.errMsg || err.message || '未知错误'),
            icon: 'error'
          })
        }
      })
    },

    // 保存图片到相册
    saveImageToAlbum(filePath) {
      console.log('开始保存图片到相册，原始路径:', filePath)
      
      // 验证文件路径
      const validation = PlatformUtils.validateSaveFilePath(filePath)
      if (!validation.isValid) {
        console.error('文件路径验证失败:', validation.error)
        uni.hideLoading()
        uni.showToast({
          title: '文件路径无效: ' + validation.error,
          icon: 'error'
        })
        return
      }
      
      const normalizedPath = validation.normalizedPath
      console.log('标准化后的文件路径:', normalizedPath)
      
      if (PlatformUtils.supportsPhotoAlbum()) {
        // 移动端使用saveImageToPhotosAlbum
        console.log('使用saveImageToPhotosAlbum保存到相册')
        
        // 尝试多种路径格式
        const pathVariations = [
          normalizedPath,
          filePath, // 原始路径
          filePath.replace('file://', ''), // 移除file://前缀
          'file://' + filePath.replace('file://', '') // 添加file://前缀
        ]
        
        let attemptCount = 0
        const maxAttempts = pathVariations.length
        
        const trySaveToAlbum = () => {
          if (attemptCount >= maxAttempts) {
            console.error('所有路径都无法保存到相册')
            uni.hideLoading()
            uni.showToast({
              title: '保存到相册失败，尝试本地保存',
              icon: 'error'
            })
            this.saveImageToLocal(filePath)
            return
          }
          
          const currentPath = pathVariations[attemptCount]
          console.log(`尝试保存路径 ${attemptCount + 1}/${maxAttempts}:`, currentPath)
          
          uni.saveImageToPhotosAlbum({
            filePath: currentPath,
            success: () => {
              console.log('保存到相册成功，使用路径:', currentPath)
              uni.hideLoading()
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
              
              // 保存到最近处理记录
              this.saveToRecent(currentPath)
            },
            fail: (err) => {
              console.error(`路径 ${currentPath} 保存失败:`, err)
              attemptCount++
              // 延迟一点时间再尝试下一个路径
              setTimeout(trySaveToAlbum, 100)
            }
          })
        }
        
        // 开始尝试保存
        trySaveToAlbum()
        
      } else {
        // 其他平台使用保存到本地
        console.log('当前平台不支持相册保存，使用本地保存')
        this.saveImageToLocal(normalizedPath)
      }
    },

    // 保存图片到本地
    saveImageToLocal(filePath) {
      console.log('开始保存图片到本地，路径:', filePath)
      
      try {
        if (PlatformUtils.supportsDownload()) {
          // H5平台，创建下载链接
          console.log('H5平台，使用下载方式')
          const link = document.createElement('a')
          link.href = filePath
          link.download = `watermark_${Date.now()}.png`
          link.click()
          
          uni.hideLoading()
          uni.showToast({
            title: '图片已下载',
            icon: 'success'
          })
        } else {
          // Android平台，尝试使用预览方式
          console.log('使用预览方式保存')
          this.previewImage(filePath)
        }
      } catch (error) {
        console.error('保存到本地失败:', error)
        uni.hideLoading()
        // 最后的降级方案：预览图片
        this.previewImage(filePath)
      }
    },
    
    // 预览图片（Android平台降级方案）
    previewImage(filePath) {
      try {
        console.log('开始预览图片:', filePath)
        
        // 在Android中，使用预览图片的方式
        uni.previewImage({
          urls: [filePath],
          current: filePath,
          success: () => {
            console.log('图片预览成功')
            uni.hideLoading()
            uni.showToast({
              title: '图片已生成，请手动保存',
              icon: 'success',
              duration: 3000
            })
            
            // 保存到最近处理记录
            this.saveToRecent(filePath)
          },
          fail: (err) => {
            console.error('图片预览失败:', err)
            uni.hideLoading()
            uni.showToast({
              title: '图片已生成，请查看控制台获取路径',
              icon: 'none',
              duration: 3000
            })
            
            // 在控制台输出图片路径，方便开发者获取
            console.log('生成的图片路径:', filePath)
          }
        })
      } catch (error) {
        console.error('预览图片失败:', error)
        uni.hideLoading()
        uni.showToast({
          title: '图片已生成，请查看控制台获取路径',
          icon: 'none',
          duration: 3000
        })
        console.log('生成的图片路径:', filePath)
      }
    },

    // 预览图片（开发工具降级方案）
    previewImage(filePath) {
      try {
        // 在开发工具中，使用预览图片的方式
        uni.previewImage({
          urls: [filePath],
          current: filePath,
          success: () => {
            uni.hideLoading()
            uni.showToast({
              title: '图片已生成，请手动保存',
              icon: 'success',
              duration: 3000
            })
            
            // 保存到最近处理记录
            this.saveToRecent(filePath)
          },
          fail: (err) => {
            uni.hideLoading()
            console.error('预览失败:', err)
            uni.showToast({
              title: '生成成功，请查看控制台获取图片路径',
              icon: 'none',
              duration: 3000
            })
            
            // 在控制台输出图片路径，方便开发者获取
            console.log('生成的图片路径:', filePath)
          }
        })
      } catch (error) {
        uni.hideLoading()
        console.error('预览失败:', error)
        uni.showToast({
          title: '生成成功，请查看控制台获取图片路径',
          icon: 'none',
          duration: 3000
        })
        
        // 在控制台输出图片路径
        console.log('生成的图片路径:', filePath)
      }
    },

    // 保存到最近处理记录
    saveToRecent(filePath) {
      try {
        const recent = uni.getStorageSync('recentImages') || []
        const newItem = {
          path: filePath,
          thumbnail: filePath,
          name: `水印图片_${new Date().getTime()}`,
          timestamp: Date.now()
        }
        
        // 添加到开头
        recent.unshift(newItem)
        
        // 只保留最近20张
        const updatedRecent = recent.slice(0, 20)
        
        uni.setStorageSync('recentImages', updatedRecent)
      } catch (e) {
        console.error('保存最近记录失败:', e)
      }
    }
  }
}
</script>

<style scoped>
.preview-section {
  margin-bottom: 20rpx;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 16rpx;
}

.preview-canvas {
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
  border: 1rpx solid #ddd;
  display: block;
  margin: 0 auto;
}

.loading-placeholder {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  color: #666;
}

.debug-section {
  background-color: #f0f0f0;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid #ddd;
}

.debug-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.debug-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.settings-panel {
  padding-bottom: 40rpx;
}

.button-group {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.button-group button {
  flex: 1;
  font-size: 28rpx;
  padding: 15rpx 20rpx;
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.position-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  background-color: #f9f9f9;
}

.position-item.active {
  border-color: #007AFF;
  background-color: #e6f3ff;
}

.position-icon {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.position-text {
  font-size: 24rpx;
  color: #666;
}

.color-section {
  margin-top: 20rpx;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
  margin-top: 10rpx;
}

.color-item {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  cursor: pointer;
}

.color-item.active {
  border-color: #007AFF;
  border-width: 4rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.action-buttons button {
  flex: 1;
}
</style> 